<template>
  <el-dialog
  title="题目预览"
  :visible.sync="showQuestionDialog"
  width="900px"
  :before-close="btnClose">
  <el-row type="flex" justify="start" style="margin-bottom:20px;">
    <el-col :span="6">【题型】：{{questionType}}</el-col>
    <el-col :span="6">【编号】：{{questionDetail.id}}</el-col>
    <el-col :span="6">【难度】：{{difficulty}}</el-col>
    <el-col :span="6">【标签】：{{questionDetail.tags || '无'}}</el-col>
  </el-row>
  <el-row type="flex" justify="start" style="margin-bottom:20px;">
    <el-col :span="6">【学科】：{{questionDetail.subjectName}}</el-col>
    <el-col :span="6">【目录】：{{questionDetail.directoryName}}</el-col>
    <el-col :span="6">【方向】：{{questionDetail.direction}}</el-col>
  </el-row>
  <hr>
  <el-row type="flex" justify="start" style="margin-top:20px;">
    <el-col :span="6">【题干】：</el-col>
  </el-row>
  <el-row type="flex" justify="start" style="margin-top:20px;">
    <el-col  style="color:#3900fe;">{{questionDetail.question | html2Text}}</el-col>
  </el-row>
  <el-row v-if="questionDetail.questionType !== '3'" type="flex" justify="start" style="margin-top:20px;">
    <el-col>{{questionDetail.questionType === '1' ? '单' : '多'}}选题 选项：（以下选中的选项为正确答案）</el-col>
  </el-row>
  <el-row  style="margin-bottom:20px;">
    <!-- 单选框组 -->
    <el-radio-group :value="1" v-if="questionDetail.questionType === '1'">
        <el-row v-for="item in questionDetail.options" :key="item.id" style="margin-top:10px;">
            <el-radio :label="item.isRight">{{item.title}}</el-radio>
        </el-row>
    </el-radio-group>
    <!-- 多选框组 -->
     <el-checkbox-group :value="[1]" v-else-if="questionDetail.questionType === '2'">
        <el-row v-for="item in questionDetail.options" :key="item.id" style="margin-top:10px;">
            <el-checkbox :label="item.isRight">{{item.title}}</el-checkbox>
        </el-row>
    </el-checkbox-group>
  </el-row>
  <hr>
  <el-row type="flex" justify="start" style="margin-top:20px;margin-bottom:20px;">
    <el-col >
        【参考答案】：
        <el-button type="danger" size="small" @click="showVideo = !showVideo">视频答案预览</el-button>
    </el-col>
  </el-row>
  <el-row v-if="showVideo" type="flex" justify="start" style="margin-top:20px;margin-bottom:20px;">
    <el-col >
        <video  :src="questionDetail.videoURL" controls></video>
    </el-col>
  </el-row>
  <hr>
  <el-row type="flex" justify="start" style="margin-top:20px;margin-bottom:20px;">
    <el-col >
        【答案解析】：{{questionDetail.answer | html2Text}}
    </el-col>
  </el-row>
  <hr>
  <el-row type="flex" justify="start" style="margin-top:20px;margin-bottom:20px;">
    <el-col >
        【题目备注】：{{questionDetail.remarks}}
    </el-col>
  </el-row>
  <span slot="footer" class="dialog-footer">
    <el-row type="flex" justify="end">
        <el-button type="primary" @click="btnClose">关 闭</el-button>
    </el-row>
  </span>
</el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  computed: {
    questionType () {
      const res = questionType.find(
        (item) => item.value === Number(this.questionDetail.questionType)
      )
      return res?.label ? res.label : '未知'
    },
    difficulty () {
      const res = difficulty.find(
        (item) => item.value === Number(this.questionDetail.difficulty)
      )
      return res?.label ? res.label : '未知'
    }
  },
  data () {
    return {
      questionDetail: {},
      showVideo: false
    }
  },
  props: {
    showQuestionDialog: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 关闭按钮
    btnClose () {
      this.$emit('update:showQuestionDialog', false)
      // setTimeout(() => {
      this.questionDetail = {}
      this.showVideo = false
      // }, 200)
    },
    // 请求数据
    async getQuestionDetail (id) {
      const { data } = await detail({ id })
      this.questionDetail = data
    }
  }
}
</script>

<style>

</style>
